<template>
	<view class="certification">
		<view class="cerHearderBox" v-if="isRealName" >
			<image class="cerBoxImg" src="/static/my/id_card.png" mode="widthFix"></image>
			<text>已实名认证</text>
		</view>
		
		<view class="cer_header" v-else>
			<view class="title">请完成实名认证</view>
			<view class="content">
				<text>按照法律法规要求，进一步使用区块链服务需要提供身份信息，请填写真实、有效的信息。</text>
				<text>实名认证后即可创建区块链地址并支付购买。</text>
			</view>
		</view>

		<view class="cer_box">
			<view class="cer_li top_radius">
				<view class="c_li_left">真实姓名</view>
				<input class="c_li_right" v-model="params.name"  placeholder-class="placeholder-class" type="text" placeholder="请输入"  :disabled='isRealName'>
			</view>
			<view class="cer_li button_radius unset-border">
				<view class="c_li_left">身份证号</view>
				<input class="c_li_right" v-model="params.idCard" placeholder-class="placeholder-class" type="text" placeholder="请输入身份证" :disabled='isRealName' >
			</view>
			<view class="c_code" v-if="!isRealName">
				<input class="c_li_right" v-model="params.code" placeholder-class="placeholder-class" type="text" placeholder="请填写右边图片的答案" :disabled='isRealName' >
				<view class="code_img" @click="getLoginSmsCode">
					<image  class="imgBox" :src="codeImg" ></image>
				</view>
			</view>
		</view>
		<block v-if="!isRealName">
			<view class="tips">
				{{msg}}
			</view>
			<view class="real_name" v-if="params.name != '' && params.idCard != '' && params.code != ''" @click="realName">实名</view>
			<view class="real_name real_name_no" v-else @click="effective">实名</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// msg:'请输入真实有效的身份信息',
				msg:'',
				task:false, //判断是否是盲盒页面进来
				blindboxStatus:false, //判断是否是盲盒首页进来
				isRealName:false, //是否实名状态
				params:{
					name:'',
					idCard:'',
					code:'',
					uuid:''
				},
				codeImg:''
			}
		},
		onLoad(e) {
			if(e.isRealName != undefined ){
				this.isRealName = JSON.parse(e.isRealName);
				if(this.isRealName){
				   this.getRealNameInfo()
				}else{
					this.getLoginSmsCode()
				}
			}else{
				this.isRealName = false
				this.getLoginSmsCode()
			}		
			if(e.blindboxStatus != undefined && e.blindboxStatus != 'undefined'){
				this.blindboxStatus = JSON.parse(e.blindboxStatus)
			}else{
				this.blindboxStatus = false
			}
			
		},

		methods: {
			async getLoginSmsCode(){
				var res = await this.$api.getLoginSmsCode()
				this.codeImg = 'data:image/png;base64,'+res.result.code
				this.params.uuid = res.result.uuid
			},
			async getRealNameInfo(){
			    var res = await this.$api.getRealNameInfo()	
				this.params = res.data
			},
			// 效验参数
			effective(){
			    if(this.params.name == ''){this.$queue.showToast('请输入真实姓名');return false; }
				else if(this.params.idCard == ''){this.$queue.showToast('请输入身份证号');return false; }
				else if(this.params.code == ''){this.$queue.showToast('请填写右边图片的答案');return false; }
			},
			// 实名认证
			async realName(){
				uni.showLoading({ title:'正在请求中',mask:true})
				try{
					var res = await this.$api.setRealNameInfo(this.params)
						uni.hideLoading()
						this.$queue.setData('isRealName',true)
						this.$queue.showToast('实名成功！')
					    if(this.blindboxStatus){
							setTimeout(()=>{
								// uni.redirectTo({
								// 	url:'/pages/pay/blindbox'
								// })
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},1000)
						}
						else{
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},1000)
						}

				}catch{
					uni.hideLoading()
				}
				
			  // console.log(res)
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F8FBFF;
	}
	.top_radius{
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.button_radius{
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	}
	.unset-border{
		border-bottom: unset !important;
	}
	.cer_header{
		width: 750rpx;
		box-sizing: border-box;
		padding: 40rpx 32rpx 80rpx 32rpx;
	}
	.cer_header .title{
		font-weight: 400;
		font-size: 48rpx;
		line-height: 68rpx;
		color: #000000;
		margin-bottom: 20rpx;
	}
	.cer_header .content text{
		display: block;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333333;
	}
	.cerHearderBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #666666;
		font-size: 28rpx;
		padding: 120rpx 0 80rpx 0;
		
	}
	.cerHearderBox .cerBoxImg{
		width: 116rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.cer_box{
		width: 686rpx;
		margin: 0 auto;
	}
	.cer_li{
		width: 100%;
		background: #fff;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #EDEDED;
		color: #000000;
	}
	.c_li_left{
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		margin-right: 34rpx;
	}
	.c_li_right{
		width: 480rpx;
		font-size: 28rpx;
	}
	.placeholder-class{
		font-size: 28rpx;
	    color: #999999;
	}
	/* 提示 */
	.tips{
		width: 686rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 10rpx 24rpx 0 24rpx;
		ont-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #EE3225;
	}
	/* 实名按钮 */
	.real_name{
		width: 686rpx;
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin-top: 36rpx;
	}
	.real_name_no{
		opacity: .5;
	}
	.c_code{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}
	.c_code .c_li_right{
		width: 430rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-left:20rpx;
	}
	.code_img{
		width: 216rpx;
		height: 88rpx;
		
		background: #fff;
		border-radius: 0px 16rpx 16rpx 0px;
	}
</style>
